<template>
    <div class="container">
        <el-tag type="success">订单信息</el-tag>
        <table class="infoTab" v-if="showInfo">
            <tr><td>订单号</td><td>{{supInfo.order.order_no}}</td></tr>
            <tr><td>订单总价</td><td>{{supInfo.order.order_total}}</td></tr>
            <tr v-if="supInfo.order.order_pay_status==0?false:true"><td>结算金额</td><td>{{supInfo.order.settlement_money}}</td></tr>
            <tr><td>订单支付状态</td><td>{{supInfo.order.order_pay_status | payFilter}}</td></tr>
            <tr><td>物流状态</td><td>{{supInfo.order.order_status | deliveryFilter}}</td></tr>
            <tr><td>选择的收货地址</td><td>{{supInfo.order.detail_address}}</td></tr>
            <tr><td>时间</td><td>
                <el-steps :active="2" align-center>
                    <el-step title="订单创建时间" :description="supInfo.order.create_time" :status="supInfo.order.create_time?'success':'process'"></el-step>
                    <el-step title="结算时间" :description="supInfo.order.settlement_time" :status="supInfo.order.settlement_time?'success':supInfo.order.create_time?'process':'wait'"></el-step>
                    <el-step title="支付时间" :description="supInfo.order.pay_time" :status="supInfo.order.pay_time?'success':supInfo.order.settlement_time?'process':'wait'"></el-step>
                    <el-step title="发货时间" :description="supInfo.order.deliver_time" :status="supInfo.order.deliver_time?'success':supInfo.order.pay_time?'process':'wait'"></el-step>
                </el-steps>
            </td></tr>
            <tr v-if="supInfo.order.order_pay_status==0?false:true"><td>第三方支付流水号</td><td>{{supInfo.order.out_trade_no}}</td></tr>
            <tr><td>是否开具发票</td><td>{{supInfo.order.is_open_invoice | invoiceFilter}}</td></tr>
            <tr><td>备注</td><td>{{supInfo.order.remark}}</td></tr>
        </table>
        <!--<br>-->
        <!--<el-tag type="success">商品详情</el-tag>-->
        <el-table
            v-if="showInfo"
            :data="supInfo"
            border
            :span-method="objectSpanMethod"
            style="width: 100%">
            <!--<el-table-column prop="order_no" label="订单号"></el-table-column>-->
            <!--<el-table-column prop="purchasersConpanyName" label="采购商"></el-table-column>-->
            <!--<el-table-column prop="goods_name" label="商品名称" sortable></el-table-column>-->
            <!--&lt;!&ndash;<el-table-column label="图片">&ndash;&gt;-->
                <!--&lt;!&ndash;<template slot-scope="scope">&ndash;&gt;-->
                    <!--&lt;!&ndash;<img&ndash;&gt;-->
                        <!--&lt;!&ndash;:src="config.fileUrl+scope.row.goodsImgList[0].img_url+'?x-oss-process=image/resize,w_80,h_80'"&ndash;&gt;-->
                        <!--&lt;!&ndash;@click="openImg(config.fileUrl+scope.row.goodsImgList[0].img_url)"/>&ndash;&gt;-->
                <!--&lt;!&ndash;</template>&ndash;&gt;-->
            <!--&lt;!&ndash;</el-table-column>&ndash;&gt;-->
            <!--<el-table-column label="商品规格">-->
                <!--<el-table-column-->
                    <!--label="规格">-->
                    <!--<template  slot-scope="scope">-->
                        <!--<div>{{scope.row.norm.norm}}</div>-->
                    <!--</template>-->
                <!--</el-table-column>-->
                <!--<el-table-column width="200" label="价格">-->
                    <!--<template slot-scope="scope">-->
                        <!--<div >{{scope.row.price}}<span class="detail-xiu" @click="updateNorm(scope.$index, scope.row)"><i class="el-icon-edit"></i>修改</span></div>-->
                        <!--<div v-show="priceUpdate==scope.$index">-->
                            <!--<el-input v-model="price" placeholder="请输入内容" class="detail-xiu-input"></el-input>-->
                            <!--<span class="detail-xiu detail-click" @click="updateYes(scope.$index, scope.row)">确认</span>-->
                            <!--<span class="detail-xiu detail-click" @click="updateNo(scope.$index, scope.row)">取消</span>-->
                        <!--</div>-->
                    <!--</template>-->
                <!--</el-table-column>-->
                <!--<el-table-column-->
                    <!--label="单位">-->
                    <!--<template  slot-scope="scope">-->
                        <!--<div>{{scope.row.norm.unit}}</div>-->
                    <!--</template>-->
                <!--</el-table-column>-->
            <!--</el-table-column>-->
            <!--<el-table-column label="商品数量" width="200">-->
                <!--<template  slot-scope="scope">-->
                    <!--<div>{{scope.row.num}}<span class="detail-xiu" @click="updateNum(scope.$index, scope.row)"><i class="el-icon-edit"></i>修改</span></div>-->
                    <!--<div v-show="numUpdate==scope.$index">-->
                        <!--<el-input v-model="num" placeholder="请输入内容" class="detail-xiu-input"></el-input>-->
                        <!--<span class="detail-xiu detail-click" @click="updateYes(scope.$index, scope.row)">确认</span>-->
                        <!--<span class="detail-xiu detail-click" @click="updateNo(scope.$index, scope.row)">取消</span>-->
                    <!--</div>-->
                <!--</template>-->
            <!--</el-table-column>-->
            <!--<el-table-column label="商品是否有效">-->
                <!--<template slot-scope="scope">-->
                    <!--<span>{{scope.row.is_exists | invoiceFilter}}</span>-->
                <!--</template>-->
            <!--</el-table-column>-->
            <!--<el-table-column prop="total" label="总价" sortable></el-table-column>-->
            <!--<el-table-column-->
                <!--prop="remark"-->
                <!--label="商品备注">-->
            <!--</el-table-column>-->
        </el-table>
        <!--图片弹层-->
        <el-dialog
            width="50%"
            title="图片"
            :visible.sync="innerVisible"
            append-to-body>
            <img :src="openImgUrl" style="width: 100%" alt="">
        </el-dialog>
    </div>
</template>

<script>
    export default {
        name: "",
        data () {
            return {
                supInfo: [],
                showInfo: false,
                isPay:false,
                innerVisible: false, // 大图弹层
                openImgUrl: '', // 大图url
                len:0,
                numUpdate:-1,
                priceUpdate:-1,
                price:'',
                num:''
            }
        },
        props: ['uid'],
        filters:{
            payFilter(value){
                let str = '';
                if(value==='0'){
                    str = '未付款';
                }
                if(value==='1'){
                    str = '已付款';
                }
                return str;
            },
            deliveryFilter(value){
                let str = '';
                if(value=='1'){
                    str = '待发货';
                }
                if(value=='2'){
                    str = '已发货';
                }
                if(value=='3'){
                    str = '已签收';
                }
                if(value=='4'){
                    str = '退货中';
                }
                if(value=='5'){
                    str = '已退货';
                }
                if(value=='6'){
                    str = '取消交易';
                }
                return str;
            },
            invoiceFilter(value){
                let str = '';
                if(value==='0'){
                    str = '否';
                }
                if(value==='1'){
                    str = '是';
                }
                return str;
            }
        },
        methods:{
            loadopen() {
                this.loading = this.$loading({
                    lock: true,
                    text: 'Loading',
                    spinner: 'el-icon-loading',
                    background: 'rgba(0, 0, 0, 0.2)'
                });
                setTimeout(() => {this.loading.close();}, 5000);
            },
            loadclose() {
                this.loading.close();
            },
            // 获取订单信息
            getInfo(){
                if(!this.uid) {
                    return;
                }
                console.log(this.uid)
                // this.loadopen();
                // this.config.get('/supply/order/findDetail', {orderId: this.uid}).then(res => {
                //     this.loadclose();
                //     if (res.data.code === '0') {
                //         this.supInfo = res.data.list;
                //         this.len = res.data.list.length
                //         $.each(res.data.list,(index,item)=>{
                //             item.norm = JSON.parse(item.norm);
                //         })
                //         this.showInfo = true;
                //     } else {
                //         this.$message.error(this.config.handleError(res.data));
                //     }
                // });
            },
            // 订单号和供应商合并
            objectSpanMethod({ row, column, rowIndex, columnIndex }) {
                if (columnIndex === 0 || columnIndex === 1) {
                    if (rowIndex % this.len === 0) {
                        return {
                            rowspan: this.len,
                            colspan: 1
                        };
                    } else {
                        return {
                            rowspan: 0,
                            colspan: 0
                        };
                    }
                }
            },
            // 修改订单价格
            updateNorm(index,row){
                if(this.state==0||this.state==1||this.state==2){
                    this.price = row.price
                    this.num = this.num==''? row.num:this.num
                    this.priceUpdate = index
                }else{
                    this.$message({
                        message: '该订单不支持修改',
                        type: 'warning'
                    });
                }
            },
            // 修改订单数量
            updateNum(index,row){
                if(this.state==0||this.state==1||this.state==2){
                    this.num = row.num
                    this.price = this.price==''?row.price:this.price
                    this.numUpdate = index
                }else {
                    this.$message({
                        message: '该订单不支持修改',
                        type: 'warning'
                    });
                }
            },
            // 确认
            updateYes(index,row){
                let obj = {
                    "orderId":this.uid,
                    "detailId":row.id,
                    "price":this.price,
                    "num":this.num
                }
                this.loadopen();
                this.config.post('/supply/order/update', {jsonStr:JSON.stringify(obj)}).then(res => {
                    this.loadclose();
                    if (res.data.code === '0') {
                        this.getInfo()
                        this.$message({
                            message: res.data.message,
                            type: 'success'
                        });
                        this.priceUpdate = -1
                        this.numUpdate = -1
                    } else {
                        this.$message.error(this.config.handleError(res.data));
                    }
                });

            },
            // 取消
            updateNo(index,row){
                this.priceUpdate = -1
                this.numUpdate = -1
                this.$message('已取消修改');
            },
            // 查看大图
            openImg(url){
                this.openImgUrl = url;
                this.innerVisible = true;
            },
        }
    }
</script>

<style scoped>
    .infoTab{
        width: 100%;
    }
    .infoTab tr td:first-child{
        width: 8rem;
        text-indent: 1rem;
        line-height: 1.5rem;
        background: #eee;
    }
    .infoTab tr td:last-of-type{
        text-indent: 1rem;
        border-bottom: 1px solid #eee;
    }
    .detail-xiu{
        color: #409EFF;
        float: right;
        cursor: pointer;
    }
    .detail-click{
        padding-left: 5px;
    }
    .detail-xiu-input{
        width:80px;
    }
</style>
